﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>网页导航菜单</title>
    <style>
        body {
            background-color: #ffdee0;
        }

        #navigation {
            width: 200px;
            font-family: Arial;
        }

            #navigation ul {
                list-style-type: none; /* 不显示项目符号 */
                margin: 0px;
                padding: 0px;
            }

            #navigation li {
                border-bottom: 1px solid #ED9F9F; /* 添加下划线 */
            }

                #navigation li a {
                    display: block; /* 区块显示 */
                    padding: 5px 5px 5px 0.5em;
                    text-decoration: none;
                    border-left: 12px solid #711515; /* 左边的粗红边 */
                    border-right: 1px solid #711515; /* 右侧阴影 */
                }

                    #navigation li a:link, #navigation li a:visited {
                        background-color: #c11136;
                        color: #FFFFFF;
                    }

                    #navigation li a:hover { /* 鼠标经过时 */
                        background-color: #990020; /* 改变背景色 */
                        color: #ffff00; /* 改变文字颜色 */
                    }
    </style>
</head>
<body>
    <div id="navigation">
        <ul>
            <li><a href="#">推荐网站</a></li>
            <li><a href="#">新闻头条</a></li>
            <li><a href="#">最新电影</a></li>
            <li><a href="#">网上购物</a></li>
            <li><a href="#">娱乐八卦</a></li>
        </ul>
    </div>
</body>
</html>